<!-- 充值页面 -->
<template>
	<view class="all">
		<view class="input">
			<view class="left">
				 <u--input
				    placeholder="请输入提现金额"
				    border="none"
					fontSize=16
				    v-model="value"
				    @change="change"
				  ></u--input>
			</view>
			<view class="right">
				全部提现
			</view>
		</view>
		<view class="style">
			<view class="s_title">
				提现方式
			</view>
			<view class="s_item">
				<view class="item1">
					<view class="left">
						<view class="" style="width: 40px;height:40px">
							<image style="width: 40px;height:40px" src="/static/img/icon_wechat.png" alt="" width="100%" height="100%" ></image>
						</view>
						<text style="margin-left: 30rpx;">微信</text>
					</view>
					<view class="right">
						<view class=""  @click="chooseWX()" style="width: 25px;height:25px;">
							<image v-if='!wx'  style="width: 25px;height:25px" src="/static/img/select.png" alt=""width="100%" height="100%"></image>
							<image v-if='wx' style="width: 25px;height:25px" src="/static/img/selected.png" alt=""width="100%" height="100%"></image>
						</view>
						
					</view>
				</view>
				<view class="item1">
					<view class="left">
						<view class=""  style="width: 40px;height:40px">
							<image  style="width: 40px;height:40px" src="/static/img/icon_alipay.png" alt="" width="100%" height="100%" ></image>
						</view>
						<text style="margin-left: 30rpx;">支付宝</text>
					</view>
					<view class="right">
						<view class="" @click="chooseZFB()" style="width: 25px;height:25px">
							<image v-if='!zfb'  style="width: 25px;height:25px" src="/static/img/select.png" alt=""width="100%" height="100%"></image>
							<image v-if='zfb' style="width: 25px;height:25px" src="/static/img/selected.png" alt=""width="100%" height="100%"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="bts" v-if="!status">
					确认提现
				</view>
				<view class="bts2" v-if="status">
					确认提现
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:'',
				wx:false,
				zfb:false,
				status:false
			}
		},
		methods: {
			chooseWX(){
				this.zfb=false,
				this.wx=!this.wx
				if(this.zfb||this.wx){
					this.status=true
				}
				if(!this.zfb&&!this.wx){
					this.status=false
				}
				
			},
			chooseZFB(){
				this.wx=false,
				this.zfb=!this.zfb
				if(this.zfb||this.wx){
					this.status=true
				}
				if(!this.zfb&&!this.wx){
					this.status=false
				}
			},
			change(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.all{
		padding-top: 5px;
		.input{
			padding: 0 15px;
			height: 55px;
			background-color: #ffffff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.right{
				font-size: 16px;
				color: #5398F6;
			}
			.left{
				
			}
		}
		.style{
			.s_title{
				height: 80px;
				font-size: 20px;
				line-height: 80px;
				font-weight: bold;
				padding: 0 15px;
			}
			.s_item{
				background-color: #ffffff;
				.item1{
					height: 55px;
					padding: 0 15px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.left{
						display: flex;
						align-items: center;
					}
					.right{
						
					}
				}
			}
		}
		.bottom{
			height: 200px;
			display: flex;
			justify-content: center;
			align-items: center;
			.bts{
				width: 231px;
				height: 44px;
				background-color: #A8A8A8;
				border-radius: 22px;
				line-height: 44px;
				text-align: center;
				font-size: 16px;
				color: #ffffff;
			}
			.bts2{
				width: 231px;
				height: 44px;
				background-color:#5398F6;
				border-radius: 22px;
				line-height: 44px;
				text-align: center;
				font-size: 16px;
				color: #ffffff;
			}
		}
	}
</style>
